<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>粘性定位</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .page-header {
        height: 100px;
        background-color: skyblue;
        position: sticky;
        top: 0;
        line-height: 100px;
        text-align: center;
      }

      .content {
        height: 200px;
        overflow: auto;
      }

      .item {
        background-color: orange;
      }

      .first {
        background-color: green;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        /* 离他最近的一个《可滚动》的的祖先元素，即使这个祖先不是最近的真实的可滚动祖先 不会脱离文档流*/
        position: sticky;
        top: 0px;
      }

      /* 粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定 */
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <div class="page-header">头部</div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 每一项 -->
      <div class="item">
        <div class="first">A</div>
        <h2>A1</h2>
        <h2>A2</h2>
        <h2>A3</h2>
        <h2>A4</h2>
        <h2>A5</h2>
        <h2>A6</h2>
        <h2>A7</h2>
        <h2>A8</h2>
      </div>

      <div class="item">
        <div class="first">B</div>
        <h2>A1</h2>
        <h2>A2</h2>
        <h2>A3</h2>
        <h2>A4</h2>
        <h2>A5</h2>
        <h2>A6</h2>
        <h2>A7</h2>
        <h2>A8</h2>
      </div>

      <div class="item">
        <div class="first">C</div>
        <h2>A1</h2>
        <h2>A2</h2>
        <h2>A3</h2>
        <h2>A4</h2>
        <h2>A5</h2>
        <h2>A6</h2>
        <h2>A7</h2>
        <h2>A8</h2>
      </div>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus,
      aspernatur porro dolores nihil illo tenetur debitis modi. Voluptatibus
      odit tenetur deserunt, quasi odio dolorum vero maxime dolorem, id
      perspiciatis aspernatur. Neque recusandae pariatur voluptate culpa
      blanditiis exercitationem omnis beatae sint reprehenderit deleniti! Facere
      blanditiis vero ducimus quasi consequuntur nisi dolorem libero modi. Vitae
      sequi sed nisi atque, commodi laudantium earum. Accusamus, iste quod!
      Tempore at libero porro magnam, fuga nisi nesciunt excepturi esse placeat
      earum dolores aspernatur tenetur quas neque maiores, ullam, sequi unde?
      Soluta doloribus quidem provident adipisci tempora? Voluptatibus velit
      facere nulla a earum? Voluptas ipsum itaque esse qui non voluptatem! Sint
      et in consequatur dolorum, fuga perferendis, quisquam sequi molestiae
      delectus aliquid nesciunt eaque voluptas porro. Deserunt. Tempora,
      molestiae omnis! Tempora illum vitae perspiciatis eum ad fugiat nostrum
      quisquam nihil rerum, quod ab. Dolorem autem molestias fugit maxime
      consequatur adipisci, recusandae quidem in est, rem iure repellat?
      Eligendi nihil fugit totam excepturi voluptate dolore ab, vel similique
      explicabo dolor consectetur distinctio ipsa quos illum possimus amet!
      Dolorem perspiciatis recusandae quae, ex obcaecati veritatis voluptas
      nostrum quia unde. Quidem aliquam sequi quasi odit. Officia corrupti
      asperiores veniam alias laudantium accusantium rerum optio ut, incidunt
      consectetur quas non quo architecto consequuntur veritatis nisi impedit
      officiis quaerat, esse placeat? Aliquid. Voluptas explicabo repellat
      voluptate error deserunt nostrum illo et fugiat odit aspernatur vel harum
      esse, saepe facilis id dolores deleniti facere iure quas quam fugit
      numquam. Illo inventore laudantium atque. Officiis excepturi natus unde
      voluptatem eligendi. Est sit, facilis tempore nobis adipisci eos odit
      eligendi nesciunt quia deserunt ducimus commodi ullam aperiam similique
      nisi architecto sapiente, reprehenderit amet perferendis. Numquam. Natus,
      fuga ducimus velit asperiores distinctio quidem atque ut illo! Facere
      ipsum ullam quasi veritatis dolor perferendis corporis libero, eos
      explicabo aut quidem tenetur earum eum minus possimus quia ut? Tempore at
      libero porro magnam, fuga nisi nesciunt excepturi esse placeat earum
      dolores aspernatur tenetur quas neque maiores, ullam, sequi unde? Soluta
      doloribus quidem provident adipisci tempora? Voluptatibus velit facere
      nulla a earum? Voluptas ipsum itaque esse qui non voluptatem! Sint et in
      consequatur dolorum, fuga perferendis, quisquam sequi molestiae delectus
      aliquid nesciunt eaque voluptas porro. Deserunt. Tempora, molestiae omnis!
      Tempora illum vitae perspiciatis eum ad fugiat nostrum quisquam nihil
      rerum, quod ab. Dolorem autem molestias fugit maxime consequatur adipisci,
      recusandae quidem in est, rem iure repellat? Eligendi nihil fugit totam
      excepturi voluptate dolore ab, vel similique explicabo dolor consectetur
      distinctio ipsa quos illum possimus amet! Dolorem perspiciatis recusandae
      quae, ex obcaecati veritatis voluptas nostrum quia unde. Quidem aliquam
      sequi quasi odit. Officia corrupti asperiores veniam alias laudantium
      accusantium rerum optio ut, incidunt consectetur quas non quo architecto
      consequuntur veritatis nisi impedit officiis quaerat, esse placeat?
      Aliquid. Voluptas explicabo repellat voluptate error deserunt nostrum illo
      et fugiat odit aspernatur vel harum esse, saepe facilis id dolores
      deleniti facere iure quas quam fugit numquam. Illo inventore laudantium
      atque. Officiis excepturi natus unde voluptatem eligendi. Est sit, facilis
      tempore nobis adipisci eos odit eligendi nesciunt quia deserunt ducimus
      commodi ullam aperiam similique nisi architecto sapiente, reprehenderit
      amet perferendis. Numquam. Natus, fuga ducimus velit asperiores distinctio
      quidem atque ut illo! Facere ipsum ullam quasi veritatis dolor perferendis
      corporis libero, eos explicabo aut quidem tenetur earum eum minus possimus
      quia ut? Tempore at libero porro magnam, fuga nisi nesciunt excepturi esse
      placeat earum dolores aspernatur tenetur quas neque maiores, ullam, sequi
      unde? Soluta doloribus quidem provident adipisci tempora? Voluptatibus
      velit facere nulla a earum? Voluptas ipsum itaque esse qui non voluptatem!
      Sint et in consequatur dolorum, fuga perferendis, quisquam sequi molestiae
      delectus aliquid nesciunt eaque voluptas porro. Deserunt. Tempora,
      molestiae omnis! Tempora illum vitae perspiciatis eum ad fugiat nostrum
      quisquam nihil rerum, quod ab. Dolorem autem molestias fugit maxime
      consequatur adipisci, recusandae quidem in est, rem iure repellat?
      Eligendi nihil fugit totam excepturi voluptate dolore ab, vel similique
      explicabo dolor consectetur distinctio ipsa quos illum possimus amet!
      Dolorem perspiciatis recusandae quae, ex obcaecati veritatis voluptas
      nostrum quia unde. Quidem aliquam sequi quasi odit. Officia corrupti
      asperiores veniam alias laudantium accusantium rerum optio ut, incidunt
      consectetur quas non quo architecto consequuntur veritatis nisi impedit
      officiis quaerat, esse placeat? Aliquid. Voluptas explicabo repellat
      voluptate error deserunt nostrum illo et fugiat odit aspernatur vel harum
      esse, saepe facilis id dolores deleniti facere iure quas quam fugit
      numquam. Illo inventore laudantium atque. Officiis excepturi natus unde
      voluptatem eligendi. Est sit, facilis tempore nobis adipisci eos odit
      eligendi nesciunt quia deserunt ducimus commodi ullam aperiam similique
      nisi architecto sapiente, reprehenderit amet perferendis. Numquam. Natus,
      fuga ducimus velit asperiores distinctio quidem atque ut illo! Facere
      ipsum ullam quasi veritatis dolor perferendis corporis libero, eos
      explicabo aut quidem tenetur earum eum minus possimus quia ut?
    </div>
  </body>
</html>
